<template>
	<view class="">
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="item.id==TabCur?'text-orange cur':''" v-for="item in tabList" :key="item.id" @tap="tabSelect" :data-id="item.id">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>
		<view class="container" v-if="TabCur == 1">
			<!-- 新闻列表 -->
			<view class="news-list">
				<view class="news-item" v-for="item in teamList" :key="item.id">
					<view class="news-item__content">
						<!-- <view class="lddq">
							<view class="news-item__content__title">{{ item.team.name }}</view>
							
						</view> -->
						<!-- <view class="item-intro">
							<text class="sm text-gray cuIcon-read" style="margin-right: 20rpx;"></text> {{ item.team.detail }}
						</view> -->
						<!-- <view class="" style="vertical-align: middle;">
							<text class="sm text-gray cuIcon-group" style="margin-right: 20rpx;"></text> {{ item.team_useridsCount }} / {{ item.max_num }}
						</view> -->
						<view class="" style="vertical-align: middle;">
							<text class="sm text-gray cuIcon-friend" style="margin-right: 20rpx;"></text> 申请团队：{{ item.team.name }}
						</view>
						<view class="" style="vertical-align: middle;">
							<text class="sm text-gray cuIcon-time" style="margin-right: 20rpx;"></text> 申请时间：{{ item.createtime }}
						</view>
						
						<view style="margin-top: 10rpx;display: flex;justify-content: flex-end;width: 100%;">
							<!-- <view class="news-item__content__author">
								<view class="tx">
									<view class="sm cu-avatar round" :style="{'background-image':`url(${item.captain.avatar})`}"></view>
								</view>
								<view style="margin-bottom: 10rpx;">
									{{ item.captain.nickname }}
								</view>
							</view> -->
							<view class="">
								<button class="sm cu-btn round bg-blue" v-if="item.status === 0" >待审核</button>
								<button class="sm cu-btn round bg-green" v-if="item.status === 1" >已通过</button>
								<button class="sm cu-btn round bg-red" v-if="item.status === 2" >已拒绝</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 竞赛队伍申请 -->
		<view class="container" v-else>
			<!-- 新闻列表 -->
			<view class="news-list">
				<view class="news-item" v-for="item in competitionTeamList" :key="item.id">
					<view class="news-item__content">
						<!-- <view class="lddq">
							<view class="news-item__content__title">{{ item.team.name }}</view>
							
						</view> -->
						<!-- <view class="item-intro">
							<text class="sm text-gray cuIcon-read" style="margin-right: 20rpx;"></text> {{ item.team.detail }}
						</view> -->
						<!-- <view class="" style="vertical-align: middle;">
							<text class="sm text-gray cuIcon-group" style="margin-right: 20rpx;"></text> {{ item.team_useridsCount }} / {{ item.max_num }}
						</view> -->
						<view class="" style="vertical-align: middle;">
							<text class="sm text-gray cuIcon-friend" style="margin-right: 20rpx;"></text> 申请团队：{{ item.team.name }}
						</view>
						<view class="" style="vertical-align: middle;">
							<text class="sm text-gray cuIcon-time" style="margin-right: 20rpx;"></text> 申请时间：{{ item.createtime }}
						</view>
						
						<view style="margin-top: 10rpx;display: flex;justify-content: flex-end;width: 100%;">
							<!-- <view class="news-item__content__author">
								<view class="tx">
									<view class="sm cu-avatar round" :style="{'background-image':`url(${item.captain.avatar})`}"></view>
								</view>
								<view style="margin-bottom: 10rpx;">
									{{ item.captain.nickname }}
								</view>
							</view> -->
							<view class="">
								<button class="sm cu-btn round bg-blue" v-if="item.status === 0" >待审核</button>
								<button class="sm cu-btn round bg-green" v-if="item.status === 1" >已通过</button>
								<button class="sm cu-btn round bg-red" v-if="item.status === 2" >已拒绝</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

export default {
	data() {
		return {
			TabCur: 1,
			scrollLeft: 0,
			tabList:[
				{
					id:1,
					name:'团队队伍申请'
				},
				{
					id:2,
					name:'竞赛队伍申请'
				}
			],
			teamList:[],
			competitionTeamList:[],
			hasMore:true,
			teamListForm:{
				user_id:this.user_id,
				page:1,
				limit:1000
			},
			news: [
				
			]
		}
	},
	// components:{
		
	// },
	onLoad(query) {
		let token = JSON.parse(uni.getStorageSync('vuexvuex'))
		var parsedData = JSON.parse(token.value);
		var user_id = parsedData.userinfo.user_id; 

		
	
		this.getTeamTaskList()
		this.getCompetitionTeamList()
	},
	methods: {
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
		},
		async joinTeam(id){
			uni.showModal({
			        title: '提示',
			        content: '是否加入该团队？',
			        showCancel: true, // 是否显示取消按钮
			        cancelText: '取消', // 取消按钮的文字
			        cancelColor: '#000000', // 取消按钮的文字颜色
			        confirmText: '确认', // 确认按钮的文字
			        confirmColor: '#3CC51F', // 确认按钮的文字颜色
			        success: (res) => {
			          if (res.confirm) {
			            // 用户点击了确认按钮
						this.$myHttp.post({
							
							url: this.$myHttp.urlMap.joinTeam,
							data: {
								team_id:id
							}
						}).then(
							console.log('321321res: ', res)
						)
						
			            
			          }
			        },
			      });
			
		},
		
		async getCompetitionTeamList(){
			let res = await this.$myHttp.post({
				
				url: this.$myHttp.urlMap.getCompetitionJoinRecord,
				data: this.teamListForm
			})
			this.competitionTeamList = res.data.data
			console.log('this.teamList: ', this.competitionTeamList)
			
		},
		async getTeamTaskList(){
			let res = await this.$myHttp.post({
				
				url: this.$myHttp.urlMap.getJoinTeam,
				data: this.teamListForm
			})
			this.teamList = res.data.data
			
		},
		gotoTeamDetail() {
			uni.navigateTo({
				url: '/pages/teamDetail/teamDetail'
			})
		}
	}
}
</script>

<style>
.container {
	padding: 10px;
	background-color: #f5f5f5;
}

.news-list {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.news-item {
	border-radius: 5px;
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #eee;
}

.news-item__content {
	position: relative;
	box-sizing: border-box;
	padding: 8px;
	width: 100%;
	height: 100%;
	float: left;
}

.news-item__content__title {
	padding-bottom: 4px;
	font-size: 18px;
	font-weight: 800;
	/* line-height: 100px; */
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.news-item__content__desc {
	font-size: 12px;
	line-height: 16px;
	/* line-height: 100px; */
	/* 副标题超过两行显示省略号 */
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.news-item__content__time {
	position: absolute;
	left: 10px;
	bottom: 10px;
	color: #999;
	font-size: 12px;

}


.news-item__content__author {
	
	color: #999;
	font-size: 12px;
	
	display: flex;
	align-items: center;

}


.news-item__content__author .tx {
	width: 27px;
	height: 27px;
}

.news-item__content__author .autname {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.news-item__image {
	box-sizing: border-box;
	padding: 10px;
	width: 30%;
	height: 100%;
	float: left;
}

.news-item__image image {
	width: 100%;
	height: 100%;
}
</style>
